<template>
  <div>
    <div class="tagCloud">

      <div v-for="tag in tags" :key="tag.id" style="display: inline-block;border-top: #333333">
        <el-button size="small" @click="clickTag(tag.id)"  :style="`background-color:${tag.color}`" style="font-weight: bold;margin:0px 8px 8px 0px;color: #FFFFFF">
          {{ tag.tagName }}
        </el-button>
      </div>
    </div>
  </div>

</template>

<script>
import NProgress from "nprogress";

export default {
  name: "TagCloud",
  data() {
    return {
      tags: []
    }
  },
  methods: {
    getAllTags() {
      this.$http({
        url: `tag/list`
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.tags = data.data;
        }
      })
    },
    clickTag(id){
      this.$router.push({path: '/', query: {tagId:id}})

    }
  },
  mounted() {
    this.getAllTags();
  }
}
</script>

<style scoped lang="less">
.tagCloud {
  width: 300px;
  height: 500px;
  display: inline-block;
  padding-top: 50px;
}

</style>
